<script lang="ts" setup>
import { ref, watch } from 'vue'

type ModeType = 'single' | 'multiple'

type ColumnItem = { text: string; value: string; selected?: boolean }

const props = defineProps<{
  show: boolean
  mode: ModeType
  selected: string[]
  columns: ColumnItem[]
}>()

const emit = defineEmits<{
  (e: 'confirm', value: string[]): void
  (e: 'close'): void
}>()

const show = ref(false)
const selected = ref<string[]>([])
const columns = ref<ColumnItem[]>([])

watch(
  () => props.show,
  (value) => {
    if (!value) return
    show.value = value

    columns.value = props.columns.map((item) => ({
      ...item,
      selected: props.selected.includes(item.value),
    }))

    selected.value = JSON.parse(JSON.stringify(props.selected))
  }
)

/**
 * 选择
 */
const handleSelect = (value: ColumnItem) => {
  switch (props.mode) {
    case 'single':
      columns.value.forEach((item) => {
        item.selected = item.value === value.value
      })
      selected.value = [value.value]
      break
    case 'multiple':
      value.selected = !value.selected
      if (value.selected) selected.value.push(value.value)
      if (!value.selected) {
        selected.value.splice(selected.value.indexOf(value.value), 1)
      }
      break
  }
}

/**
 * 确认
 */
const handleConfirm = () => {
  ~(show.value = false) && emit('confirm', selected.value)
}

/**
 * 关闭
 */
const handleClose = () => emit('close')
</script>

<template>
  <van-popup
    v-model:show="show"
    round
    position="bottom"
    @closed="() => handleClose()"
  >
    <div class="select-popup">
      <div class="button">
        <div
          class="button__item button__item--cancel"
          @click="() => (show = false)"
        >
          取消
        </div>

        <div
          class="button__item button__item--confirm"
          @click="() => handleConfirm()"
        >
          确认
        </div>
      </div>

      <div class="content">
        <div
          class="content__row"
          v-for="(item, index) in columns"
          :key="index"
          @click="() => handleSelect(item)"
        >
          <div class="content__label">
            {{ item.text }}
          </div>

          <img
            class="content__icon content__icon--success"
            v-show="item.selected"
            src="@/assets/image/21093@2x.png"
          />

          <img
            class="content__icon content__icon--circle"
            v-show="!item.selected"
            src="@/assets/image/21789@2x.png"
          />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.select-popup {
  margin: 16px;
}

.button {
  display: flex;
  justify-content: space-between;

  &__item--cancel {
    color: #aeaeae;
  }

  &__item--confirm {
    color: #994bff;
  }
}

.content {
  max-height: 280px;
  min-height: 160px;
  overflow-y: auto;

  margin-top: 16px;

  &__row {
    display: flex;
    align-items: center;
  }

  &__row + &__row {
    margin-top: 16px;
  }

  &__icon {
    margin-left: auto;
    width: 20px;
    height: 20px;
  }
}
</style>
